<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>day05</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
	<script type="text/javascript" src="30days.js"></script>
	
	
	<style type="text/css">
		body {
			width: 500px;
			margin: auto; /* center*/
			text-align: center;
		}
		dl {
			
		}	
		dd {
			margin 0;
			padding: 1em 0;
		}
		dt {
			cursor: pointer;
			font-weight: bold;
			font-size: 1.5em;
			line-height: 2em;
			background-color: #e3e3e3;
			color: red;	
			border-bottom: 1px solid #c5c5c5;
			border-top: 1px solid white;
		}
		dt:first-child {
			border-top: none;
		}
		dt:nth-last-child(2) {
			border-bottom: none;
		}
		.hide { display: none;}
	</style>
</head>



<body>
	<dl>
		<dt>what are your hours?</dt>
		<dd>we are open 24/7</dd>
		<dt>what are your hours?</dt>
		<dd>we are open 24/7</dd>
		<dt>what are your hours?</dt>
		<dd>we are open 24/7</dd>
		<dt>what are your hours?</dt>
		<dd>we are open 24/7</dd>
	</dl>
	
	
<script type="text/javascript">

// function that calls itself
(function() {
	var dd = $('dd');
	dd.filter(':nth-child(n+4)').addClass('hide');
	$('dl').on('mouseenter','dt', function() {
		$(this)
			.next()
				.slideDown(200)
				.siblings('dd')
					.slideUp(200);
	});
	//dd.hide();
})();

</script>

</body>

</html>